<template>
  <div :style="`transform: rotate(${rotate}deg);`">
    <div class="arrow">
      <div
        class="light-line"
        :style="`width:${length}px`"
      >
        <div class="line-block gradient" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rotate: {
      type: Number,
      default: 0
    },
    length: {
      type: Number,
      default: 260
    }
  }
}
</script>

<style lang="scss" scoped>
.arrow {
  width: 270px;
  height: 50px;

  .light-line {
    position: absolute;
    top: 20px;
    left: 8px;
    height: 20px;
  }

  /* 渐变流光效果线条，要将横向宽度设置为超过100%的值，否则无动画效果 */
  .line-block {
    position: relative;
    width: 100%;
    height: 6px;
    background: linear-gradient(-90deg,
        #caf2ff 1%,
        #015771 4%,
        transparent 12%,
        transparent 16%,
        #caf2ff 16%,
        #015771 19%,
        transparent 27%,
        transparent 33%,
        #caf2ff 33%,
        #015771 36%,
        transparent 44%,
        transparent 50%,
        #caf2ff 50%,
        #015771 53%,
        transparent 61%,
        transparent 66%,
        #caf2ff 66%,
        #015771 69%,
        transparent 77%,
        transparent 84%,
        #caf2ff 84%,
        #015771 87%,
        transparent 95%,
        transparent 100%);
    background-size: 200% 100%;
  }

  /* 指定使用Gradient动画，5s完成一次动画，匀速，无限循环 */
  .gradient {
    animation: Gradient 5s linear infinite;
    -webkit-animation: Gradient 5s linear infinite;
    -moz-animation: Gradient 5s linear infinite;
  }
}

/* 定义Gradient动画效果：初始时显示最右端，结束时显示最左端（向右滚动） */
@keyframes Gradient {
  0% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 100%;
  }
}
</style>
